<template>
	<el-dialog :visible.sync="options.showDialog" width="600px" class="evalDialog">
		<h3 class="title">录入信息</h3>
		<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="entry-form">
			<el-form-item label="会员名称" prop="businessmanName">
				<el-input v-model="form.businessmanName" style="width: 320px;"></el-input>
			</el-form-item>
			<el-form-item label="身份证号码" prop="identity">
				<el-input v-model="form.identity"  style="width: 320px;"></el-input>
			</el-form-item>
			<el-form-item label="项目名称" prop="projectName">
				<el-input v-model="form.projectName" style="width: 320px;"></el-input>
			</el-form-item>
			<el-form-item label="收入金额" prop="revenue">
				<el-input v-model="form.revenue" style="width: 320px;"></el-input>
			</el-form-item>
			<el-form-item label="收入月份" prop="incomeTime">
				<el-date-picker v-model="form.incomeTime" value-format="yyyy-MM" type="month" style="width: 320px;" placeholder="选择收入月份"></el-date-picker>
			</el-form-item>
		</el-form>
		<div class="entry-btn">
			<el-button type="primary" size="small" style="width: 100px" @click="submitForm">录入</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options:{require: true,type: Object}
	},
	data(){
		return {
			form:{
				businessmanName: '',								//会员名称
				projectName: '',									//项目名称
				identity: '',										//身份证号码
				revenue: '',										//收入金额
				incomeTime: '',										//收入月份
			},
			rules:{
				businessmanName: [
					{ required: true, message: '请输入会员名称', trigger: 'blur' },
				],
				identity: [
					{ required: true, message: '请输入身份证号码', trigger: 'blur' },
					{ min: 15, max: 18, message: '请如实填写18位号码，以供核对', trigger: 'blur' },
					{ required: true,pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
						message: '请输入正确的身份证号码',trigger: 'blur'
					}
				],
				projectName: [
					{ required: true, message: '请输入项目名称', trigger: 'blur' },
				],
				revenue: [
					{ required: true, message: '请输入收入金额', trigger: 'blur' },
				],
				incomeTime: [
					{ required: true, message: '请选择收入月份', trigger: 'blur' },
				]
			}
		}
	},
	methods:{
		/* 提交数据 */
		submitForm(){
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.$emit('submitEntry',[this.form]);
				} else {
					this.$message({
						message: '请将信息填写正确！'
					})
					return false;
				}
			});
		},
		/* 清除数据 */
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	},
	watch:{
		'options.showDialog'(){
			if(!this.options.showDialog){
				this.resetForm('form');
			}
		}
	}
}
</script>

<style scoped="scoped">
.title{text-align: center;font-weight: bold;}
.entry-form{width: 500px;margin: 20px auto;}
.entry-btn{padding: 20px 0;text-align: center;}
</style>
